<template>
	<view class="common-content">
		<scroll-view scroll-y="true" class="palne-main" :class="{ ovhidden: show }">
			<image class="bg" src="../../static/order/plane-bg.png" mode="aspectFit"></image>
			<view class="search">
				<view class="search-from" :class="[{ 'search-from-nobottompadding': !locationPlaneHistory }]">
					<view class="choose-travel border-bottom">
						<span class="text">出差申请单</span>
						<view @click="selectApplication()">
							<span class="text_app" :class="[{ active: application.applicationId }]">{{ application.applicationName }}</span>
							<image class="icon_app" src="../../static/order/arrow.png" mode="aspectFit"></image>
						</view>
					</view>
					<!-- appAddress：{{ appAddress }} selectCity：{{ selectCity }} application: {{ application }} -->
					<view class="city">
						<p @click="selectCityOpen('flys')" :class="[{ active: application.applicationId }]">
							{{ selectCity.start.name ? selectCity.start.name : application.originResult[0].placeName }}
						</p>
						<view class="img"><image src="../../static/order/plane-turn.png" mode="aspectFit"></image></view>
						<p @click="selectCityOpen('flye')" :class="[{ active: application.applicationId }]" class="right">
							{{ selectCity.end.name ? selectCity.end.name : application.detinationResult[0].placeName | firstCity }}
						</p>
					</view>
					<view class="choose-travel">
						<span class="text">出发时间</span>
						<view @click="open">
							<span :class="[{ active: application.applicationId }]" class="text_app">{{ application.checkInDate | dayFormt }}</span>
							<image class="icon_app" src="../../static/order/arrow.png" mode="aspectFit"></image>
						</view>
					</view>
					<view @click="searchList()" class="btn" :class="[{ 'active-btn': application.applicationId }]">查询</view>
					<view class="history" v-if="locationPlaneHistory && locationPlaneHistory.length > 0">
						<p>
							<span class="historyItem" v-for="(item, index) in locationPlaneHistory" :key="'locationPlaneHistory' + index">
								<span>{{ item.start.name }}</span>
								<image src="../../static/order/plane-fromto.png" mode="aspectFit"></image>
								<span>{{ item.end.name }}</span>
							</span>
						</p>
						<view @click="clearHistory()">清除历史</view>
					</view>
				</view>
				<view class="standard">
					<h3>
						<span class="left-icon"></span>
						<span class="middle-title">我的出差标准</span>
					</h3>
					<template v-if="travelGradeInfo">
						<!-- 查询到出差标准 -->
						<view>
							<h4>
								国内机票
								<template v-if="travelGradeInfo.overStandardSelfExpense">
									<span>超标需自理</span>
								</template>
							</h4>
							<p>
								<span>舱位</span>
								<template v-if="travelGradeInfo.travelLimit == 'EC'">
									<span>经济舱</span>
								</template>
								<template v-else-if="travelGradeInfo.travelLimit == 'BC'">
									<span>商务舱</span>
								</template>
								<template v-else-if="travelGradeInfo.travelLimit == 'FC'">
									<span>头等舱</span>
								</template>
								<template v-else>
									<span>超级经济舱</span>
								</template>
							</p>
							<p>
								<span>最高折扣</span>
								<span>最高{{ travelGradeInfo.maxBookRebate }}折</span>
							</p>
							<p>
								<span>最高价格</span>
								<span>最高限制{{ travelGradeInfo.amountLimit }}元</span>
							</p>
							<p>
								<span>提前预订</span>
								<span>需提前{{ travelGradeInfo.befBookDays }}天</span>
							</p>
						</view>
						<!-- 查询到出差标准 -->
					</template>
					<template v-else>
						<!-- 没有查询到出差标准 -->
					</template>
				</view>
				<uni-calendar ref="calendar" :insert="false" @confirm="confirm" :showMonth="false" :startDate="startDate" />
			</view>
		</scroll-view>
		<citySelect ref="citySelect" @citySelect="citySelect" @open="openCity" />
	</view>
</template>

<script>
import { travelGradeList } from '@/api/travelApi.js';
import citySelect from '../components/selectCity/index.vue';
import { dataFormat2 } from '@/utils/dateFun.js';
import { getCurDate } from '@/utils/utils.js';
export default {
	components: {
		citySelect
	},
	data() {
		return {
			show: false,
			application: {
				applicationName: '请选择',
				detinationResult: [{ placeName: '目的地', planeCode: '' }],
				originResult: [{ placeName: '出发地', planeCode: '' }],
				checkInDate: '请选择',
				data: {}
			},
			locationPlaneHistory: [],
			cityType: '',
			selectCity: { start: {}, end: {} },
			startDate: '1',
			appAddress: [],
			// 选择的城市
			typeCity: 'flys',
			// 出差标准
			travelGradeInfo: null
		};
	},
	created() {
		this.startDate = dataFormat2();
		uni.getStorage({
			key: 'locationPlaneHistory',
			success: res => {
				console.log(res);
				this.locationPlaneHistory = res.data;
			}
		});
		this.getTravlGradeInfo();
	},
	watch: {
		application: {
			deep: true,
			immediate: true,
			handler(nval, old) {
				console.log('nval-----------', nval, old);
				if (nval.data.applicationId != old.data.applicationId) {
					// 当前组件进行展示
					this.selectCity.start.name = nval.data.originName;
					this.selectCity.start.code = nval.data.originResult[0].planeCode;
					this.selectCity.end.name = nval.data.destinationName;
					this.selectCity.end.code = nval.data.destinationResult[0].planeCode;
					console.log('this.selectCity', this.selectCity);
					// 再下一个组件进行展示
					this.appAddress = [
						{
							name: nval.data.originName,
							id: nval.data.destination
						},
						{
							name: nval.data.destinationName,
							id: nval.data.origin
						}
					];
				}
			}
		}
	},
	computed: {},
	filters: {
		dayFormt(time) {
			console.log('time', time);
			if (time === '请选择') {
				return time;
			} else {
				let datelist = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				// time  = '2022-09-12'
				let str = time.substring(5, 7) + '月' + time.substring(8) + '日';
				console.log('new Date(time).getDay()', new Date(time).getDay());
				return str + '  ' + datelist[new Date(time).getDay()];
			}
		},
		// 如果是多个返回第一个
		firstCity(city) {
			console.log('city', city);
			if (city.indexOf(',') != -1) {
				let cityArr = city.split(',');
				return cityArr[0] + '...';
			} else {
				return city;
			}
		}
	},
	onLoad: function(option) {
		my.hideBackHome();

		uni.getStorage({
			key: 'locationPlaneHistory',
			success: res => {
				console.log(res);
				this.locationPlaneHistory = res.data;
			}
		});
	},
	methods: {
		openCity(open) {
			this.show = open;
		},
		confirm(e) {
			console.log(e);
			// this.application.applicationDate = e.range.before + '至' + e.range.after;
			this.application.checkInDate = e.fulldate;
		},
		selectApplication() {
			uni.navigateTo({
				url: '/pages/order/applicationList'
			});
		},
		searchList() {
			if (!this.application.applicationId) {
				uni.showToast({
					title: '请选择出差申请单',
					icon: 'none',
					duration: 500
				});
				return;
			}
			if (!this.selectCity.start.name) {
				uni.showToast({
					title: '请选择出发地',
					icon: 'none',
					duration: 500
				});
				return;
			}
			if (!this.selectCity.end.name) {
				uni.showToast({
					title: '请选择目的地',
					icon: 'none',
					duration: 500
				});
				return;
			}
			if (!this.application.checkInDate) {
				uni.showToast({
					title: '请选择入住时间',
					icon: 'none',
					duration: 500
				});
				return;
			} else {
				//判断是否是当天
				let currentDay = new Date(getCurDate());
				let selectDay = new Date(this.application.checkInDate);
				console.log('是否是当天', this.application.checkInDate, currentDay);
				if (currentDay > selectDay) {
					uni.showToast({
						title: '请选择日期不能小于当天',
						icon: 'none',
						duration: 500
					});
					return;
				}
			}
			//实现 有的话，提到第一个
			//没有的话，长度不够3放到第一个
			if (!this.locationPlaneHistory) {
				this.locationPlaneHistory = [];
			}
		    let selectCityObject = JSON.parse(JSON.stringify(this.selectCity));
			console.log('selectCityObject', selectCityObject)
			if (this.locationPlaneHistory.length == 0) {
				if (selectCityObject.end.name.indexOf(',') != -1) {
					let cityArr = selectCityObject.end.name.split(',');
					selectCityObject.end.name = cityArr[0]
				} else {
					selectCityObject.end.name = selectCityObject.end.name
				}
				this.locationPlaneHistory.push(selectCityObject);
			} else {
				for (let index = 0; index < this.locationPlaneHistory.length; index++) {
					let element = this.locationPlaneHistory[index];
					if (element.name != selectCityObject.name) {
						this.locationPlaneHistory = this.locationPlaneHistory.shift(selectCityObject);
					}
				}
			}
			let length = this.locationPlaneHistory.length;
			if (length > 3) {
				this.locationPlaneHistory = this.locationPlaneHistory.slice(0, 3);
			}
			uni.setStorage({
				key: 'locationPlaneHistory',
				data: this.locationPlaneHistory,
				success: function() {
					console.log('success');
				}
			});

			uni.navigateTo({
				url: this.getPlaneListUrl()
			});
		},
		getPlaneListUrl() {
			// let path =
			// 	'planelList?checkInDate=' +
			// 	this.application.checkInDate +
			// 	'&checkOutDate=' +
			// 	this.application.checkOutDate +
			// 	'&cityID=' +
			// 	this.selectCity.id +
			// 	'&applicationId=' +
			// 	this.application.data.applicationId;
			// let path = 'planeList'
			this.locationPlaneHistory.push(this.selectCity);
			let path =
				'planeList' +
				'?arriveAirportCode=' +
				this.selectCity.end.code +
				'&departAirportCode=' +
				this.selectCity.start.code +
				'&departDate=' +
				this.application.checkInDate +
				'&departCity=' +
				this.selectCity.start.name +
				'&arriveCity=' +
				this.selectCity.end.name +
				'&applicationId=' +
				this.application.data.applicationId;
			return '/pages/webViewh5/index?path=' + encodeURIComponent(path);
		},

		selectCityOpen(type) {
			console.log('type', type);
			this.typeCity = type;
			console.log('this.appAddress', this.appAddress);
			if (!this.application.applicationId) {
				uni.showToast({
					title: '请选择出差申请单',
					icon: 'none',
					duration: 500
				});
				return;
			}
			this.show = true;
			// this.$refs.citySelect.open('plane', this.appAddress);
			this.$refs.citySelect.open(type, this.appAddress);
		},
		citySelect(item) {
			console.log('选择的城市', item);
			if (this.typeCity == 'flys') {
				// 出发城市
				this.selectCity.start = item;
			} else {
				// 结束城市
				this.selectCity.end = item;
			}
		},
		clearHistory() {
			this.locationPlaneHistory = [];
			uni.setStorage({
				key: 'locationPlaneHistory',
				data: [],
				success: function() {
					console.log('success');
				}
			});
		},
		change(e) {},
		open() {
			if (!this.application.applicationId) {
				uni.showToast({
					title: '请选择出差申请单',
					icon: 'none',
					duration: 500
				});
				return;
			}
			this.$refs.calendar.open();
		},

		// 查询出差标准
		async getTravlGradeInfo() {
			let params = {
				businessType: '01'
			};
			const res = await travelGradeList(params);
			console.log('res', res);
			if (res[1].respCode === 'FJKBP0000' && res[1].respCode !== null) {
				const result = res[1].data[0];
				console.log('result', result);
				this.travelGradeInfo = result;
			} else {
				this.travelGradeInfo = null;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@mixin border_bottom1px($left: 0, $right: 0) {
	position: relative;
	&::after {
		position: absolute;
		content: ' ';
		left: #{$left}rpx;
		right: #{$right}rpx;
		height: 1rpx;
		bottom: 0;
		border-bottom: 1rpx solid #e5e5e5;
		transform: scaleY(0.5);
	}
}
.border-bottom {
	@include border_bottom1px();
}

.common-content {
	height: 100vh;
	width: 100vw;
	& > .ovhidden {
		overflow: hidden;
		height: 100vh;
	}
	.palne-main {
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		position: relative;
		.active {
			color: #333333;
		}
		.bg {
			width: 100%;
			height: 676rpx;
		}
		.search {
			margin: auto;
			position: absolute;
			top: 290rpx;
			left: 0;
			right: 0;
			.search-from {
				width: 686rpx;
				// height: 590rpx;
				background: #fff;
				margin: 0 auto;
				box-shadow: 0px 10rpx 30rpx 0rpx rgba(0, 0, 0, 0.08);
				border-radius: 20rpx;
				padding: 32rpx 32rpx 25rpx 32rpx;
				.choose-travel {
					height: 110rpx;
					line-height: 110rpx;
					display: flex;
					text-align: center;
					justify-content: space-between;
					.text {
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
						line-height: 110rpx;
					}

					& > view {
						color: #c4c4c4;
						.text_app {
							margin-right: 33rpx;
						}
						.icon_app {
							margin-right: 8rpx;
						}
					}
					image {
						width: 16rpx;
						height: 28rpx;
						vertical-align: middle;
					}
				}
				.city {
					height: 160rpx;
					@include border_bottom1px();
					display: flex;
					align-items: center;
					& > p {
						font-size: 34rpx;
						color: #333;
						line-height: 48rpx;
						height: 48rpx;
						font-weight: 600;
						flex: 1;
					}
					& > .img {
						flex: 2;
						width: 180rpx;
						height: 160rpx;
						text-align: center;
						display: flex;
						align-items: center;
						justify-content: space-around;
						image {
							width: 202rpx;
							height: 65rpx;
							// flex: 1;
							margin-bottom: 4rpx;
						}
					}
					& > p.right {
						margin-left: 40rpx;
					}
				}
				.btn {
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					background: #ffe6b2;
					border-radius: 8rpx;
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #ffffff;
					margin-top: 13px;
				}
				.active-btn {
					background: #ffa900 !important;
				}
				.history {
					margin: 20rpx 0 10rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					& > p {
						flex: 1;
						white-space: nowrap;
						overflow-x: scroll;
						color: #999;
						
						/* 隐藏滚动条 */
						scrollbar-width: none; /* firefox */
						-ms-overflow-style: none; /* IE 10+ */
						display: flex;
						span.historyItem {
							margin-right: 50rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							& > image {
								display: inline-block;
								width: 23rpx;
								height: 4rpx;
								margin-left: 5rpx;
								margin-right: 5rpx;
								vertical-align: middle;
							}
						}
						&::-webkit-scrollbar {
							display: none; /* Chrome Safari */
						}
					}
					& > view {
						background: #ffffff;
						padding: 0;
						color: #333333;
					}
				}
			}
			.search-from-nobottompadding {
				// padding-bottom: 0 ;
				height: 518rpx;
			}
			.standard {
				width: 686rpx;
				margin: 50rpx auto;
				& > h3 {
					font-size: 32rpx;
					color: #333333;
					margin-bottom: 24rpx;
					display: flex;
					align-items: center;
					span.left-icon {
						display: inline-block;
						width: 6rpx;
						height: 30rpx;
						background: #d8d8d8;
						margin-right: 26rpx;
					}
					span.middle-title {
						display: inline-block;
						height: 50rpx;
						line-height: 50rpx;
						font-size: 36rpx;
						font-weight: 500;
						color: #333333;
						margin-right: 26rpx;
					}
				}
				& > view {
					&:last-child {
						background: #ffffff;
						box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08);
						border-radius: 20rpx;
						padding: 32rpx;
						& > h5 {
							font-size: 30rpx;
							margin: 6px 0 6px;
						}
						h4 {
							font-size: 32rpx;
							color: #333333;
							margin-bottom: 32rpx;
							font-weight: 500;
							span {
								font-size: 24rpx;
								color: #333;
								border: 1px solid #ffa900;
								border-radius: 4rpx;
								padding: 0rpx 4rpx;
								margin-left: 15rpx;
							}
						}
						p {
							display: flex;
							justify-content: space-between;
							line-height: 42rpx;
							span {
								font-size: 30rpx;
								&:first-child {
									color: #666;
									font-weight: 400;
								}
								&:last-child {
									font-weight: 400;
									color: #333;
								}
							}
						}
					}
				}
			}
		}
	}
}
.vue-ref {
	height: 70vh;
}
</style>
